<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理器</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/renwu.css">
</head>
<body>
    <div id="app" class="container">
        <h1>任务管理器</h1>
        
        <!-- 添加任务区域 -->
        <div class="input-section">
            <input 
                type="text" 
                v-model="newTask" 
                placeholder="输入新任务..." 
                @keyup.enter="addTask"
            >
            <button @click="addTask">添加任务</button>
        </div>
        
        <!-- 筛选控件 -->
        <div class="filter-section">
            <button 
                :class="{ active: filter === 'all' }" 
                @click="filter = 'all'"
            >
                全部
            </button>
            <button 
                :class="{ active: filter === 'active' }" 
                @click="filter = 'active'"
            >
                待完成
            </button>
            <button 
                :class="{ active: filter === 'completed' }" 
                @click="filter = 'completed'"
            >
                已完成
            </button>
        </div>
        
        <!-- 任务列表 -->
        <ul class="task-list">
            <li 
                v-for="(task, index) in filteredTasks" 
                :key="task.id" 
                class="task-item" 
                :class="{ completed: task.completed }"
            >
                <!-- 任务完成复选框 -->
                <input 
                    type="checkbox" 
                    class="task-checkbox" 
                    v-model="task.completed"
                >
                
                <!-- 任务内容显示/编辑 -->
                <div class="task-content">
                    <span 
                        class="task-title" 
                        v-show="!task.editing"
                    >
                        {{ task.title }}
                    </span>
                    <input 
                        type="text" 
                        class="edit-input" 
                        v-show="task.editing" 
                        v-model="task.title" 
                        @keyup.enter="saveEdit(task)" 
                        @blur="saveEdit(task)"
                        v-focus
                    >
                </div>
                
                <!-- 任务操作按钮 -->
                <div class="task-actions">
                    <button 
                        class="edit-btn" 
                        @click="toggleEdit(task)"
                        v-show="!task.editing"
                    >
                        ✏️
                    </button>
                    <button 
                        class="delete-btn" 
                        @click="confirmDelete(task)"
                    >
                        🗑️
                    </button>
                </div>
            </li>
        </ul>
        
        <!-- 空状态提示 -->
        <div class="empty-state" v-show="tasks.length === 0">
            还没有任务，添加一个吧！
        </div>
        
        <!-- 统计信息 -->
        <div class="stats" v-show="tasks.length > 0">
            总计: {{ tasks.length }} | 
            已完成: {{ completedTasksCount }} | 
            待完成: {{ activeTasksCount }}
        </div>
    </div>
</body>
</html>
    <script>
        // 自定义指令：自动聚焦到编辑输入框
        Vue.directive('focus', {
            inserted: function (el) {
                el.focus()
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                newTask: '',
                tasks: [],
                filter: 'all',
                nextId: 1
            },
            computed: {
                // 筛选后的任务列表
                filteredTasks() {
                    switch(this.filter) {
                        case 'active':
                            return this.tasks.filter(task => !task.completed);
                        case 'completed':
                            return this.tasks.filter(task => task.completed);
                        default:
                            return this.tasks;
                    }
                },
                // 已完成任务数量
                completedTasksCount() {
                    return this.tasks.filter(task => task.completed).length;
                },
                // 待完成任务数量
                activeTasksCount() {
                    return this.tasks.filter(task => !task.completed).length;
                }
            },
            methods: {
                // 添加新任务
                addTask() {
                    if (this.newTask.trim() === '') return;
                    
                    this.tasks.push({
                        id: this.nextId++,
                        title: this.newTask.trim(),
                        completed: false,
                        editing: false
                    });
                    
                    this.newTask = '';
                },
                // 切换编辑状态
                toggleEdit(task) {
                    task.editing = true;
                },
                // 保存编辑
                saveEdit(task) {
                    if (task.title.trim() === '') {
                        task.title = '未命名任务';
                    }
                    task.editing = false;
                },
                // 确认删除任务
                confirmDelete(task) {
                    if (confirm('确定要删除这个任务吗？')) {
                        this.deleteTask(task);
                    }
                },
                // 删除任务
                deleteTask(task) {
                    this.tasks = this.tasks.filter(t => t.id !== task.id);
                }
            },
            // 初始化一些示例任务
            created() {
                this.tasks = [
                    { id: this.nextId++, title: '学习Vue.js基础', completed: true, editing: false },
                    { id: this.nextId++, title: '完成项目任务', completed: false, editing: false },
                    { id: this.nextId++, title: '准备演示文稿', completed: false, editing: false }
                ];
            }
        });
    </script>